<template>
    <div class="feedback">
        <div class="moduleHead">
            <span class="back" @click="$router.go(-1)"></span> {{language.feedback_title}}
        </div>
        <div class="body">
            <ul class="center">
                <li v-show='!login' class="feedback_email">
                    <div class="line_title"><b class="colorOne">*</b> {{language.feedback_youEmail}} </div>
                    <input v-model="submitObj.email" type="text" @focus="focusInput" v-bind:placeholder="language.feedback_youEmailPla" name="Email" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" v-validate:lazy="'required|email'">
                </li>
                <li class="feedback_subject">
                    <div class="line_title"><b class="colorOne">*</b> {{language.feedback_topicSubject}} </div>
                    <select v-model="submitObj.topic" name="Topic" @change='checkTopic'>
                        <option v-for="(value,index) in language.feedback_selectArr" :value="index == 0 ? '': value+'(m)'" :disabled="index == 0"> {{value}} </option>
                    </select>
                </li>
                <li class="feedback_text">
                    <div class="line_title"><b class="colorOne">*</b> {{language.feedback_comments}} </div>
                    <textarea v-model="submitObj.comment" name="Comment" @focus="focusInput" v-bind:placeholder="language.feedback_commentsPla" class="form_textarea" spellcheck="false" autocapitalize="off" v-validate="'required'"></textarea>
                </li>
                <li class="feedback_uploadFiles">
                    <div class="line_title"> {{language.feedback_attachments}} </div>
                    <div class="upload_files"> {{language.feedback_updateNote}}
                        <span v-show="btnUpload"><input @change="updatePhoto" accept="image/*" type="file" name="file0" value="0" id="file0"> {{language.unify_uploadIt}} </span>
                    </div>
                    <div class="upload_files_show" v-show='photoBase'>
                        <img :src="photoBase" />
                        <i @click="clearPhoto" class="clear_photo"></i>
                    </div>
                </li>
                <li class="feedback_submit">
                    <button @click="submitData" class="btn btn-feedback" type="button">
                        <loading :props="{show:loading,type:'btn'}"></loading>
                        {{language.unify_submit}}
                    </button>
                </li>
            </ul>
        </div>
        <publicDialog :props="this.dialogData"></publicDialog>
    </div>
</template>
<script>
import * as API from '../api';
import validationMixin from '../plugins/my-validate'
import publicDialog from './PublicDialog'
import loading from './Loading'

export default {

    name: 'feedback',

    mixins: [validationMixin],

    components: {
        loading,
        publicDialog
    },

    data: function() {
        return {
            photoBase: '',
            loading: false,
            btnUpload: true,
            showTopicErr: false,
            dialogData: {},
            login: false,
            submitObj: {
                email: '',
                topic: '',
                comment: '',
                photoObj: '',
            }
        }
    },

    created() {
        this.defaultData = _.cloneDeep(this.$data);
    },

    activated: function() {
        Object.assign(this.$data, _.cloneDeep(this.defaultData));
        this.login = Unit.getCookie('client_key') && Unit.getSessionStorage("ms_myself") ? true : false;
    },

    methods: {

        clearPhoto() {
            this.btnUpload = true;
            this.photoBase = '';
            this.submitObj.photoObj = '';
        },

        setShowError: function(val) {
            this.changeField('Email', 'showError', val);
            this.changeField('Comment', 'showError', val);
        },

        focusInput(e) {
            this.setShowError(false);
        },

        updatePhoto(e) {
            var tthis = this,
                reader;
            this.submitObj.photoObj = e.target.files[0];
            if (this.submitObj.photoObj) {
                reader = new FileReader();
                reader.readAsDataURL(this.submitObj.photoObj);
                reader.onload = function(e) {
                    if (this.result.indexOf('image') < 0) {
                        tthis.dialogData = {
                            position: 'top',
                            type: 'error',
                            content: {
                                info: tthis.language.feedback_err_msg_one,
                            }
                        };
                    } else {
                        tthis.photoBase = this.result;
                        tthis.btnUpload = false;
                    }
                }
            }
        },

        checkTopic(e) {
            var checkBool = _.trim(this.submitObj.topic).length > 0 ? true : false;
            this.showTopicErr = !checkBool;
            return checkBool;
        },

        feedBackCheckAll(e) {
            if (!this.login) {
                this.changeField('Email', 'need', true);
            }

            if (this.checkAll() && this.checkTopic()) {
                return true;
            }
        },

        showTopTip(type, msg) {
            this.dialogData = {
                position: 'top',
                type: type,
                content: {
                    info: msg,
                }
            };
        },

        submitData(e) {
            var tthis = this;
            this.setShowError(true);
            if (this.feedBackCheckAll() && !this.loading) {
                this.loading = true;
                var feedBackData = new FormData(),
                    submitObj = this.submitObj;

                if (!this.login) {
                    feedBackData.append("email", submitObj.email);
                }

                feedBackData.append("subject", submitObj.topic);
                feedBackData.append("text", submitObj.comment);

                if (submitObj.photoObj) {
                    feedBackData.append("file0", submitObj.photoObj);
                }

                API.feedback({
                    data: feedBackData,
                    success: function(data) {
                        if (typeof(data.errcode) == 'undefined') {
                            Object.assign(tthis.$data, _.cloneDeep(tthis.defaultData));
                            tthis.showTopTip('successful', data.msg);
                        } else {
                            tthis.showTopTip('error', data.errmsg);
                        }
                    },
                    complete: function() {
                        tthis.loading = false;
                    }
                });
            } else {
                if (this.dialogData.position) {
                    return false
                } else if (tthis.hasValidateError('Email')) {
                    tthis.showTopTip('error', tthis.language.feedback_youEmail + ' ' + tthis.getValidateError('Email'));
                    return false;
                } else if (!tthis.checkTopic()) {
                    tthis.showTopTip('error', tthis.language.feedback_topicSubject + ' ' + tthis.language.unify_required);
                    return false;
                } else if (tthis.hasValidateError('Comment')) {
                    tthis.showTopTip('error', tthis.language.feedback_comments + ' ' + tthis.getValidateError('Comment'));
                    return false;
                }
            }
        },

    },

}

</script>
<style scoped>
.feedback input,
.feedback textarea {
    box-sizing: border-box;
}

.feedback {
    padding-top: 44px;
    background-color: #f7f7f7;
}

.feedback .body {
    font-size: 14px;
    padding-top: 10px;
}

.feedback .center li {
    line-height: 30px;
}

.feedback .center .colorOne {
    color: #F00;
}

.feedback .center .line_title {
    padding: 2px 15px;
}

.feedback .center input,
.feedback .center select,
.feedback .center textarea {
    font-size: 14px;
    width: 100%;
    height: 42px;
    border: 0;
    color: #555;
    background: #fff;
    border-radius: 0;
    text-indent: 20px;
    border: 1px solid #e8e9ec;
    border-left: 0;
    border-right: 0;
    resize: none;
}

.feedback .center textarea {
    height: 140px;
    padding: 15px 20px;
    text-indent: 0px;
}

.feedback .feedback_uploadFiles {
    min-height: 80px;
}

.feedback .upload_files_show {
    position: relative;
    display: inline-block;
}

.feedback .feedback_uploadFiles .clear_photo {
    position: absolute;
    right: 1px;
    top: -6px;
    width: 30px;
    height: 30px;
    background: url(./../assets/icoClose2.png) center no-repeat;
    background-size: 16px;
}

.feedback .upload_files {
    position: relative;
    font-size: 12px;
    line-height: 16px;
    padding: 2px 15px;
}

.feedback .upload_files span {
    color: #2ac13b;
}

.feedback .upload_files input {
    position: absolute;
    height: 100%;
    width: 100%;
    right: 0;
    top: 0;
    opacity: 0;
}

.feedback .upload_files_show {
    padding: 5px 15px;
}

.feedback .upload_files_show img {
    max-width: 80px;
    max-height: 80px;
}

.feedback .upload_files_show span {
    color: #2ac13b;
    font-size: 12px;
}

.feedback .upload_files_show a.choose {
    display: block;
    width: 15px;
    height: 15px;
    /*background: url(../img/delete@2x.png) no-repeat;*/
    position: absolute;
    right: -5px;
    top: -8px;
    background-size: cover;
    z-index: 5;
}

.feedback .feedback_submit {
    padding: 10px 0;
    text-align: center;
}

.feedback .feedback_submit button {
    max-width: 80%;
    overflow: hidden;
}

</style>
